<template>
  <view class="container">
    <!-- 标题 -->
    <view class="header">
      <text class="title">实名认证</text>
    </view>

    <!-- 描述 -->
    <view class="description">
      <text>需要人脸识别来验证您的本人身份。您的个人信息将得到绝对保护仅限用于身份核验、安全检测等。</text>
    </view>

	<image src="https://zhimao.shengdunyun.net/uploads/wangeditor/20250308/67cbf29ea9582.png" class="face-img"/>

    <!-- 真实姓名 -->
    <view class="form-item">
      <text class="label">真实姓名</text>
      <input class="input" type="text" v-model="realName" disabled />
    </view>

    <!-- 开始人脸识别按钮 -->
    <button class="start-button" @click="startFaceRecognition">开始人脸识别</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      realName: "招聘者", // 真实姓名
    };
  },
  methods: {
    // 开始人脸识别
    startFaceRecognition() {
      uni.showToast({
        title: "开始人脸识别",
        icon: "none",
      });
	  uni.navigateTo({
	    url: '/pages/login/verify-relation',
	  });

      // 这里可以调用人脸识别 API
      // 例如：uni.checkIsSupportFacialRecognition() 或 uni.startFacialRecognition()
      // 具体实现需要根据平台支持的 API 进行调整
	  /* startFaceRecognition() {
  // 检查是否支持人脸识别
  wx.checkIsSupportFacialRecognition({
    success(res) {
      if (res.isSupport) {
        // 开始人脸识别
        wx.startFacialRecognition({
          success(res) {
            console.log("人脸识别成功", res);
          },
          fail(err) {
            console.error("人脸识别失败", err);
          },
        });
      } else {
        uni.showToast({
          title: "当前设备不支持人脸识别",
          icon: "none",
        });
      }
    },
    fail(err) {
      console.error("检查支持情况失败", err);
    },
  });
},*/
    },
  },
};
</script>

<style>
.container {
  padding: 20px;
  background-color: #f9f9f9;
}

.header {
  margin-bottom: 20px;
}

.title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.description {
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
}

.face-img{
  width: 190px;
  height: 143px;
}

.form-item {
  margin-bottom: 15px;
}

.label {
  font-size: 16px;
  font-weight: bold;
  color: #555;
  margin-bottom: 10px;
  display: block;
}

.input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #fff;
  font-size: 14px;
  color: #666;
}

.start-button {
  width: 100%;
  padding: 15px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  text-align: center;
  margin-top: 20px;
}

.start-button:active {
  background-color: #0056b3;
}
</style>